<template>

    <div class="store-pro">
        <div class="store-pro-head">
            共{{ total }}个货品
        </div>

        <div class="store-pro-list clearfix" id="dataList">
            <a href="/member/mstore/productCreate" class="store-pro-item creat-pro">
                <i class="icon iconfont icon-add"></i>
                <p>发布新货品</p>
            </a>

            <div v-for="item in list" :key="item.id" class="store-pro-item" @click="preview(item.id)" >
                <div class="edit">修改</div>
                <div class="store-pro-img" :style="{background: 'url(/' + item.cover_image + ')', backgroundSize: '100% auto', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}" > </div>
                <div class="store-pro-info">
                    <div class="store-pro-name">
                        {{ item.name }}
                    </div>
                    <div class="store-pro-des">
                        {{ item.info }} {{ item.spec }}
                    </div>
                    <div class="store-pro-f">
                        <div class="store-pro-price">
                        {{ item.price }} 元/{{ item.unit }}
                        </div>
                        <div class="store-pro-creat-time">
                            {{ item.friend_date }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            total: 0,
            list: null,
            listQuery: {
                page: 1,
                size: 0
            },
            loading: false
        }
    },
    created() {
    },
    mounted() {
        var self = this;
        this.mescroll = new MeScroll("mescroll", {
            up: {
                callback: self.upCallback, //上拉回调
                isBounce: false,
                //page:{size:8}, //可配置每页8条数据,默认10
                toTop: { //配置回到顶部按钮
                    src: "/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                }
            }
        });
    },
    methods: {
        // 获取商品
        getProduct() {
            // this.loading = weui.loading('正在加载...')
            axios.get('/member/mstore/product', {
                params: this.listQuery
            }).then(res => {
                let data = res.data.data
                this.total = data.total

                if (this.listQuery.page == 1) this.list = [];
                this.list = this.list.concat(data.data);
                this.mescroll.endSuccess(data.data.length);
                // this.loading.hide()
            }).catch(err => {
                console.log(err)
            })
        },
        upCallback(page) {
            this.listQuery.page = page.num
            this.listQuery.size = page.size
            this.getProduct()
        },
        preview(id) {
            window.location.href = '/member/mstore/productPreview/' + id;
        }
    }
}
</script>

<style lang="scss" scoped>
.store-pro-creat-time {
    font-size: .32rem;
    color: #999;
}

.store-pro-list .store-pro-item .store-pro-f .store-pro-price {
    flex: 1;
}

.store-pro-item {
    position: relative;
    .edit {
        position: absolute;
        font-size: .32rem;
        padding: .106667rem 0.18rem;
        background-color: #fff;
        line-height: 1;
        right: 5px;
        top: 5px;
        box-shadow: 1px 2px 2px rgba(0, 0, 0, .5);
    }
}
</style>
